<template>
  <div class="goods-sku">
    <dl v-for="item in  goods.specs" :key="item.name">
      <dt>{{item.name}}</dt>
      <dd>
        <template v-for="value in item.values" :key="value.name">
            <img @click="updateDisabledStatus({item,value})" v-if="value.picture" :class="{selected:item.active===value.name,disabled:value.disabled}" :title="value.name" :alt="value.name"  :src="value.picture">
            <span @click="updateDisabledStatus({item,value})" v-else :class="{selected:item.active===value.name,disabled:value.disabled}" >{{value.name}}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import PowerSet from '@/vender/power-set'
import { ref } from 'vue'
const getPathMap = (skus) => {
  const pathMap = {}
  skus.forEach(sku => {
    // 1. 过滤出有库存有效的sku
    if (sku.inventory) {
      // 2. 得到sku属性值数组
      const specs = sku.specs.map(spec => spec.valueName)
      // 3. 得到sku属性值数组的子集
      const getPowerSet = PowerSet(specs)
      // 4. 设置给路径字典对象
      getPowerSet.forEach(set => {
        const key = set.join('★')
        if (pathMap[key]) {
          // 已经有key往数组追加
          pathMap[key].push(sku.id)
        } else {
          // 没有key设置一个数组
          pathMap[key] = [sku.id]
        }
      })
    }
  })
  return pathMap
}
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object
    },
    skuId: {
      type: String,
      default: '1369155865461919746'
    }
  },
  setup (props, { emit }) {
    const PathMap = getPathMap(props.goods.skus)
    props.goods.specs.forEach(item => {
      const active = ref(null)
      item.active = active
      item.values.forEach(v => {
        const disabled = ref(false)
        v.disabled = disabled
      })
    })
    const initSelectedStatus = (PathMap, skuId) => {
      for (const key in PathMap) {
        if (PathMap[key].length === 1) {
          if (PathMap[key][0] === skuId) {
            const arr = key.split('★')
            props.goods.specs.forEach((value, index) => {
              value.active = arr[index]
            })
          }
        }
      }
    }
    initSelectedStatus(PathMap, props.skuId)
    const currFile = () => {
      const arr = []
      props.goods.specs.forEach(item => {
        arr.push(item.active ? item.active : undefined)
      })
      return arr
    }
    const click = (obj) => {
      if (obj) {
        if (obj.item.active === obj.value.name) {
          obj.item.active = null
          return
        }
        obj.item.active = obj.value.disabled ? undefined : obj.value.name
        obj.item.active = obj.value.disabled ? undefined : obj.value.name
      }
    }
    const updateDisabledStatus = (obj) => {
      click(obj)
      let stop = true
      props.goods.specs.forEach((item, i) => {
        const curr = currFile()
        const cu = curr.filter(v => v !== undefined)
        const active = item.active
        item.values.forEach(v => {
          if (active === v.name) return
          //   模拟用户下一次点击的数据
          curr[i] = v.name
          const key = curr.filter(v => v !== undefined).join('★')
          //   如果有货时，禁用
          v.disabled = !PathMap[key]
        })
        if (cu.length === props.goods.specs.length && stop) {
          const sku = props.goods.skus.find(sku => sku.id === PathMap[cu.join('★')][0])
          console.log(sku)
          emit('change', {
            skuId: sku.id,
            price: sku.price,
            oldPrice: sku.oldPrice,
            inventory: sku.inventory,
            specsText: sku.specs.reduce((p, n) => `${p} ${n.name}：${n.valueName}`, '').replace(' ', '')
          })
          stop = false
        }
      })
    }
    updateDisabledStatus()
    return { updateDisabledStatus }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
